<template>
    <div class="safety">
      <div class="header-warpper" @click="$router.back(-1)">
         <img src="../../assets/l_jt.png" alt="">
         <span>添加支付宝账户</span>
      </div>
      <div class="m-label">姓名</div>
      <div class="m-input-box">
         <input class="m-input" type="text" autocomplete="off" name="userName" value=""  v-model="nick_name">
      </div>
      <div class="m-label">证件号码</div>
      <div class="m-input-box">
         <input class="m-input" type="text" autocomplete="off" name="userName" value=""  v-model="z_num">
      </div>
      <div class="m-label">添加收款二维码</div>
      <div class="m-file-box">
         <img v-if="isShow" class="ns2" :src="simg1" alt="">
         <img class="ns2" :src="simg" v-if="simg" alt="">
         <input ref="files" type="file" class="m-file" accept="image/*" @change="selectImg">
         <img class="ns1" src="../../assets/add.png" alt="" v-if="isShow1">
      </div>
      <div class="m-label">支付宝账户</div>
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入支付宝账号" type="text" autocomplete="off" name="userName" value="" v-model="zfb">
      </div>
      <div class="m-label">交易密码</div>
      <div class="m-input-box">
         <input class="m-input" type="password" value="" autocomplete="new-password" name="password" placeholder="请输入交易密码" v-model="trad_pass">
      </div>
      <div class="m-label">验证码</div>
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入验证码" type="text" autocomplete="off" name="userName" value="" v-model="code">
         <span @click="newcode" v-show="show">获取验证码</span>
         <span v-show="!show">{{count}} s</span>
      </div>
      <input type="hidden" v-model="mobile" value="">
      <div class="red_btn" @click="send">提交</div>
      <p class="mui-add-info"><span>提示：</span>
        设置您的收款方式时，请务必核对使用本人的实名账号！否则因信息错误导致的转账失败引起的纠纷将由您本人承担其责任.
      </p>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="5"/>
    </div>

</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'

export default {
  name: 'add_bank',
  components: {
    Tabbar
  },
   data() {
    return {

       mobile:'',
       nick_name:'',
       z_num:'',
       zfb:'',
       trad_pass:'',
       code:'',
       isShow:false,
       isShow1:true,
       simg:'',
       simg1:'',
       count:'',
       timer:null,
       show:true,
    }
  },
  created:function(){
    this.getinfo();
  },
  mounted () {

  },
  methods: {
    getinfo (){

      this.$axios.post("/index/usercenter/index",{})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

                this.nick_name = res.data.info.real_name;
                this.z_num = res.data.info.card_id;
                this.mobile = res.data.info.mobile;

          }else{
              alert(res.data.message);
          }

      })


    },
    selectImg: function(e){
         this.file = e.target.files[0];
         let fd= new FormData();
         fd.append("file", this.file);

         // console.log(fd.get('file'))
        //  ajax data是data;将图片放在this.simg
        this.$axios.post("/index/upload/uploadimg",
        fd)
        .then(res => {
          console.log(res)
          if(res.data.code==0){

              this.simg1 = /api/+res.data.data;
              this.simg = res.data.data;
              this.isShow = true;
              this.isShow1 = false;

          }else{

            alert(res.data.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    newcode (event){

      let self = this;

      this.toast1 = this.$createToast({
        txt: '请输入新手机号',
        type: 'txt'
      });

      if(!this.mobile){
        return this.toast1.show();
      }

      this.$axios.post("/index/otcexchange/sendcode",{mobile:this.mobile})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

            const TIME_COUNT1 = 60;

             if (!this.timer) {

               this.count = TIME_COUNT1;

               this.show = false;

               this.timer = setInterval(() => {

               if (this.count > 0 && this.count <= TIME_COUNT1) {

                 this.count--;

                } else {

                 this.show = true;

                 clearInterval(this.timer);

                 this.timer = null;

                }

               }, 1000)

              }

            alert('发送成功,请留意短信');

          }else{

              alert(res.data.message);
              return;
          }

      })

    },
    send (event){

      let self = this;

      if(!this.nick_name){
         this.toast2 = this.$createToast({
            txt: '请输入姓名',
            type: 'txt'
          }).show();
          return;
      }

      this.toast2 = this.$createToast({
        txt: '请上传收款二维码',
        type: 'txt'
      });

      if(!this.simg){
        return this.toast2.show();
      }

      this.toast3 = this.$createToast({
        txt: '请输入支付宝账户',
        type: 'txt'
      });

      if(!this.zfb){
        return this.toast3.show();
      }

      this.toast4 = this.$createToast({
        txt: '请输入交易密码',
        type: 'txt'
      });

      if(!this.trad_pass){
        return this.toast4.show();
      }

      this.toast5 = this.$createToast({
        txt: '请输入验证码',
        type: 'txt'
      });

      if(!this.code){
        return this.toast5.show();
      }

      this.$axios.post("/index/usercenter/addaccount",
      {types:2,bank_number:this.simg,
        code:this.code,bank_name:this.zfb,
        trad_password:this.trad_pass,
        realname:this.nick_name
      })
      .then(res => {
        console.log(res)
        if(res.data.code==0){

          alert(res.data.msg);

          setTimeout(() => {
                this.$router.push('/index');
          }, 1000);
        }else{

          alert(res.data.msg);
        }
      })
      .catch(function (error) {
        console.log(error);
      });


    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .red_btn{
        width: 92%;
        margin: auto;
        margin-top: 2rem;
        margin-bottom: .2rem;
    }
    .safety{
        .mui-add-info {
            font-size: .373333rem;
            margin-bottom: .2rem;
            line-height: 1.8;
            color: #7e87a2;
            text-align: left;
            padding-left: 4%;
            padding-right: 4%;
            span{
                    color: #10131e;
                    font-weight: 700;
            }
        }
        .m-label{
            padding-left: 4%;
        }
        .m-file-box{
            .f-flex();
            margin-left: .4rem;
            justify-content: center;
            position: relative;
            margin-top: .64rem;
            width: 2.666667rem;
            height: 2.666667rem;
            background: #f1f3f8;
            border: 1px dotted #a6aec7;
            border-radius: .08rem;
            overflow: hidden;
            .ns1{
                width: .4rem;
                height: .4rem;
            }
            .ns2{
                width: 100%;
                height: 100%;
            }
            .m-file{
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    cursor: pointer;
                }
        }

        .m-input-box{
            padding-right: 0;
            margin-left: 4%;
            justify-content: space-between;
                span{
                    width: 35%;
                    color: #e56337;
                    font-size: .373333rem;
                    margin-top: .58rem;
                    margin-right: 4%;

                    }
                    img{
                        margin-right: .4rem
                    }
                .qh{
                    .f-flex();
                    img{
                        width: .48rem;
                        height: .48rem;
                        margin-top: .5rem;
                        margin-right: .32rem;
                    }
                }
                .r_qh{
                    width: .373333rem;
                    height: .373333rem;
                }
        }
        .m-input{
            color: #000;
            font-size: .426667rem;
            font-weight: bold;
        }
        .xga{
            padding-right: 4%;
            width: 30%;
            .f-flex();
            margin-top: .8rem;
            font-size: .373333rem;
            span{
                padding-right: .2rem;
                color: #aab2ca;
            }
            img{
                margin-top: 0;
            }
        }
    }
</style>

